<template>
  <div class="login">
     <div class="login-main">
        <div class="login-container">
          <div class="login-left">
            <img src="../../assets/images/loginPic.png" />
          </div>
          <div class="login-right">
            <p class="loginlogo"><img src="../../assets/images/loginlogo.png" /></p>
            <p>好茶仓仓库管理系统</p>
            <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" class="login-loginForm">
              <el-form-item prop="mobile">
                <el-input placeholder="请输入用户名" v-model="loginForm.mobile" :maxlength="11" :autofocus="true"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" @keyup.enter.native="submitForm"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="db" type="primary" :loading="loading" @click="submitForm">登录</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
     </div>
  </div>
</template>

<script>
import MD5 from 'js-md5'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      loginForm: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.length !== 11) {
                callback(new Error('手机号格式有误！'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions({
      login: 'login'
    }),
    submitForm () {
      this.loading = true
      this.$refs.loginForm.validate((valid) => { // 表单验证
        if (valid) {
          let data = this.loginForm
          data.password = MD5(data.password)
          this.login(data).then(res => {
            if (res.responseCode === '0000') {
              this.$message({
                type: 'success',
                message: res.responseMsg,
                duration: this.$store.state.duration,
                onClose: () => {
                  this.$router.push('/home')
                }
              })
            } else {
              this.$message.error({
                message: res.responseMsg,
                duration: this.$store.state.duration,
                onClose: () => {
                  this.loading = false
                  this.loginForm.mobile = ''
                  this.loginForm.password = ''
                }
              })
            }
          }).catch(err => {
            this.$message.error({
              message: err,
              duration: this.$store.state.duration,
              onClose: () => {
                this.loading = false
              }
            })
          })
        } else {
          this.loading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
  @import "src/assets/scss/common.scss";
  .login{
    width: 100%;
    background: #f5f7fa;
    .login-main{
      width: 100%;
      height: 630px;
      position: absolute;
      top: 50%;
      margin-top: -316px;
      border-bottom: 1px solid #eeeeee;
      border-top: 1px solid #eeeeee;
      background: url(../../assets/images/loginbg.png) no-repeat;
      .login-container{
        width: 1013px;
        height: 465px;
        margin: 82px auto 82px auto;
        position: relative;
        .login-left{
          // float: left;
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -189px;
        }
         .login-right{
           width: 464px;
           height: 464px;
           position: absolute;
           right: 0;
           top: 50%;
           margin-top: -232px;
           background: #fcfcfc;
           border-radius: 15px;
           border: 1px solid #efefef;
           box-shadow: 3px 1px 20px rgba(54, 54, 54, 0.205);
           img{
             margin: 25px auto;
            }
            p{
              font-size: 20px;
              text-align: center;
              color: #808080;
              font-weight: bold;
            }
            p.loginlogo{margin: 0}
            .login-loginForm{
              margin-top: 32px;
            }
            .el-form-item__content{
              width: 315px;
              margin-left: 74.5px!important;
            }
            .el-input__inner{
              background: #f7f7f7;
              border-color: #f0f0f0;
              border-radius: 10px;
            }
            .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus{
              border-color: #fa5555;
            }
            .el-radio-group{
              display: block;
              }
              .el-radio__input.is-checked+.el-radio__label{
                 color: $light_green;
              }
              .el-radio__input.is-checked .el-radio__inner{
                border-color: $light_green;
                background-color: $light_green;
              }
         }
      }
   }
  }
</style>
